import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const CheckboxTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
  });

  // 受控示例状态
  const [controlledA, setControlledA] = useState<boolean>(false);
  const [controlledB, setControlledB] = useState<boolean>(true);

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Checkbox 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="CheckboxTestScreen"
    >
      {/* 基础用法：非受控 defaultChecked + 文本标签 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            非受控：通过 defaultChecked 初始化；label 支持字符串或 ReactNode
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox defaultChecked label="默认选中" testID="checkbox-basic-default" />
            <UI.Checkbox label="未选中" testID="checkbox-basic-unchecked" />
            <UI.Checkbox
              defaultChecked
              label={<UI.Text variant="body2" color="text">ReactNode 标签</UI.Text>}
              testID="checkbox-basic-node-label"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 受控模式：checked + onChange */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>受控模式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            通过 checked + onChange 管理状态（外部 state）
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox
              checked={controlledA}
              onChange={setControlledA}
              label={`A：${controlledA ? '选中' : '未选中'}`}
              testID="checkbox-controlled-a"
            />
            <UI.Checkbox
              checked={controlledB}
              onChange={(next) => setControlledB(next)}
              label={`B：${controlledB ? '选中' : '未选中'}`}
              testID="checkbox-controlled-b"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 禁用状态：disabled */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>禁用状态</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            disabled 展示置灰且不可点击
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox disabled label="禁用（未选中）" testID="checkbox-disabled-unchecked" />
            <UI.Checkbox disabled defaultChecked label="禁用（选中）" testID="checkbox-disabled-checked" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：small / medium / large / 自定义数值 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            size: small / medium / large / number（自定义像素）
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox size="small" label="small" defaultChecked testID="checkbox-size-small" />
            <UI.Checkbox size="medium" label="medium" defaultChecked testID="checkbox-size-medium" />
            <UI.Checkbox size="large" label="large" defaultChecked testID="checkbox-size-large" />
            <UI.Checkbox size={30} label="30px" defaultChecked testID="checkbox-size-custom-30" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：主题预设 + 自定义 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            color: primary / secondary / success / warning / error / info / '#RRGGBB'
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox color="primary" label="primary" defaultChecked testID="checkbox-color-primary" />
            <UI.Checkbox color="secondary" label="secondary" defaultChecked testID="checkbox-color-secondary" />
            <UI.Checkbox color="success" label="success" defaultChecked testID="checkbox-color-success" />
            <UI.Checkbox color="warning" label="warning" defaultChecked testID="checkbox-color-warning" />
            <UI.Checkbox color="error" label="error" defaultChecked testID="checkbox-color-error" />
            <UI.Checkbox color="info" label="info" defaultChecked testID="checkbox-color-info" />
            <UI.Checkbox color="#8A2BE2" label="#8A2BE2" defaultChecked testID="checkbox-color-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：p/m/mh/mv/ph/pv（应用于外层 Pressable） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            支持通用 SpacingProps：p/m/mh/mv/ph/pv（示例为可见布局）
          </UI.Text>
          <View style={[styles.row, { borderWidth: 1, borderColor: colors.border, padding: 8 }]}>
            <UI.Checkbox label="m=12" m={12} testID="checkbox-spacing-m" />
            <UI.Checkbox label="mh=12" mh={12} testID="checkbox-spacing-mh" />
            <UI.Checkbox label="mv=8" mv={8} testID="checkbox-spacing-mv" />
            <UI.Checkbox label="p=8" p={8} testID="checkbox-spacing-p" />
            <UI.Checkbox label="ph=8" ph={8} testID="checkbox-spacing-ph" />
            <UI.Checkbox label="pv=4" pv={4} testID="checkbox-spacing-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 标签样式：labelStyle */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>标签样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            通过 labelStyle 自定义标签文字样式（颜色/大小/粗细等）
          </UI.Text>
          <View style={styles.row}>
            <UI.Checkbox
              defaultChecked
              label="自定义标签样式"
              labelStyle={{ color: colors.success, fontSize: 16, fontWeight: '600' }}
              testID="checkbox-label-style"
            />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default CheckboxTestScreen;